<template>

	<!-- 收藏页面 -->
	<view>
		<view style="text-align: center;font-size: 40rpx;margin-top: 30rpx;">预约看房</view>
		<view style="height: 80rpx; margin: 20rpx 30rpx 0rpx 30rpx;font-size: 30rpx;background-color: #C0C0C0;">
			<span style="text-align: center;margin: 20rpx;padding-top: 5rpx;">
				房东备注：不限(每天早上9点到晚上9点)(提前预约)
			</span>
		</view>

		<view style="margin-top: 20rpx;">
			<u-cell-group>
				<u-cell-item icon="order" @click="isShowTime = !isShowTime" title="预约看房时间" :value="dateResult" :arrow="true"
				 arrow-direction="right"></u-cell-item>
				<u-picker mode="time" @confirm="chooseDate" v-model="isShowTime" :params="params" start-year="2021" end-year="2025"></u-picker>
				<u-cell-item icon="man-add" title="选择社区顾问" value="系统自动派单" :arrow="false" arrow-direction="right"></u-cell-item>
				<u-cell-item icon="phone" title="电话" :arrow="false">
					<u-input input-align="right" slot="right-icon" placeholder="请输入电话号码" v-model="orderTel" :clearable="false"></u-input>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view style="margin: 20rpx 30rpx 0rpx 30rpx;font-size: 30rpx;background-color: #C0C0C0;">
			<span style="text-align: center;">
				来得好不是中介，我们承诺绝无电话骚扰。预约提交后，来得好将及时联系房东确认时间
				并告知你的情况(请保持电话畅通。预约完成后将由社区顾问志愿者带你上门看房)
			</span>
		</view>
		<view style="margin-top: 30rpx;">
			<u-row>
				<u-col span="5" offset="1">
					<u-button type="default" @click="cancelOrder">取消</u-button>
				</u-col>
				<u-col span="5">
					<u-button type="default" :custom-style="{'backgroundColor': '#4CD964'}" @click="confirmOrder">确认</u-button>
				</u-col>
			</u-row>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		name: "order",
		data() {
			return {
				mode: 'date',
				orderTel: '',
				isToday: '',
				orderTime: null,
				dateResult: '请选择预约时间',
				isShowTime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
			}
		},
		watch: {
			orderTel(newValue, oldvalue) {
				if (newValue.length > 11) {
					wx.showToast({
						title: '电话号码输入不正确',
						icon: 'none',
						duration: 1000
					})
					this.orderTel = oldvalue
					// console.log("this.orderTel", this.orderTel)
				}
			}
		},
		methods: {
			cancelOrder() {
				this.$emit('cancel', false)
			},
			async confirmOrder() {
				// console.log("点击了")
				if (this.orderTime === null) {
					wx.showToast({
						title: '请选择预约日期',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (this.orderTel.length !== 11) {
					wx.showToast({
						title: '请正确填写电话！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				var reg = /^1([358][0-9]|4[01456879]|6[2567]|7[0135678]|9[012356789])[0-9]{8}$/
				if(!reg.test(this.orderTel)){
					wx.showToast({
						title: '电话格式错误！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				//发送预约请求
				let orderData = await this.$request({
					url: '/v1/order',
					method: 'POST',
					data: {
						"houseId": this.data.houseId,
						"userId": getApp().globalData.userId,
						"phone": this.orderTel,
						"consultant": '系统自动派单',
						"orderTime": this.orderTime
					}
				})
				if (orderData.isSuccess) {
					var that = this
					// await wx.showToast({
					// 	title: '预约成功\n请等待管理员联系',
					// 	icon: 'success',
					// 	duration: 2000,
					// 	success() {
					// 		that.$emit('cancel', false)
					// 	}
					// })

					this.$refs.uToast.show({
						title: '预约成功\n请等待管理员联系',
						type: 'success',
						callback(){
							that.$emit('cancel', false)
						} 
					})
					
					
				}
				// console.log("orderData", orderData)
			},
			
			chooseDate(e) {
				this.dateResult = e.year + '-' + e.month + '-' + e.day
				this.orderTime = new Date(e.year, e.month -1, e.day, 8, 0, 0, 0)
				console.log(this.orderTime)
			}
		},
		props: {
			data: {}
		}
	}
</script>

<style>
	.date-bar {
		height: 80rpx;
	}

	.date-show-bar {
		height: 80rpx;
		text-align: left;
		font-size: 40rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}
</style>
